import React, { useRef } from 'react';
import * as echarts from 'echarts/core';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart as _PieChart } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { useDeepCompareEffect } from 'ahooks';
import { colors } from '@/utils/marketingMap/utils';

echarts.use([TooltipComponent, LegendComponent, _PieChart, CanvasRenderer, LabelLayout]);

interface Props {
  title: string;
  name: string;
  data: { value: number; name: string; percent: string }[];
  rich?: any;
}

const PieChart: React.FC<Props> = ({ name, title, data, rich = {} }) => {
  const chartRef = useRef<HTMLDivElement>(null);

  useDeepCompareEffect(() => {
    if (chartRef.current && data) {
      // 初始化图表
      const chartInstance = echarts.init(chartRef.current);
      const num = data.reduce((pre, cur) => pre + cur.value, 0);

      // 配置项类型定义
      const option: echarts.EChartsCoreOption = {
        tooltip: {
          trigger: 'item',
          confine: true,
        },
        color: colors,
        legend: {
          orient: 'vertical',
          right: 0,
          align: 'auto',
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 8,
          top: 'center',
          type: 'scroll',
          pageIconSize: 8,
          itemGap: 2,
          pageButtonGap: 12,
          pageButtonItemGap: 10,
          pageFormatter: '{current} / {total}',
          pageIcons: {
            vertical: [
              'path://M294.13376 512c0-13.70112 5.23264-27.40224 15.6672-37.84704l328.704-328.69376c20.91008-20.91008 54.80448-20.91008 75.70432 0 20.89984 20.89984 20.89984 54.79424 0 75.70432L423.36256 512l290.83648 290.83648c20.89984 20.89984 20.89984 54.80448 0 75.70432-20.89984 20.91008-54.79424 20.91008-75.70432 0l-328.704-328.69376C299.35616 539.40224 294.13376 525.70112 294.13376 512z',
              'path://M714.19904 549.84704l-328.704 328.69376c-20.91008 20.91008-54.80448 20.91008-75.70432 0-20.89984-20.89984-20.89984-54.80448 0-75.70432L600.63744 512 309.80096 221.16352c-20.89984-20.91008-20.89984-54.80448 0-75.70432 20.89984-20.91008 54.79424-20.91008 75.70432 0l328.704 328.69376c10.4448 10.45504 15.6672 24.14592 15.6672 37.84704S724.64384 539.40224 714.19904 549.84704z',
            ],
          },
          formatter: (name: string) => {
            const res = data.filter(item => item.name === name)[0];
            return `{a|${name.length > 12 ? name.slice(0, 12) + '...' : name}} {b|${
              res.percent
            }} {c|${res.value}}`;
          },
          textStyle: {
            color: '#0009',
            rich: {
              a: {
                width: 140,
                height: 22,
                lineHeight: 1,
              },
              b: {
                width: 40,
                align: 'right',
                // color: '#bbb'
              },
              c: {
                width: 100,
                align: 'right',
                // color: '#bbb'
              },
              ...rich,
            },
          },
        },
        series: [
          {
            name: name,
            type: 'pie',
            minAngle: 1,
            center: ['18%', '50%'],
            radius: ['55%', '80%'],
            itemStyle: {
              // borderColor: '#fff',
              // borderWidth: 2,
            },
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#4c4a4a',
                formatter: '{total|' + num + '}' + '\n\r' + '{active|' + title + '}',
                rich: {
                  total: {
                    fontSize: 18,
                    color: '#000',
                    lineHeight: 24,
                  },
                  active: {
                    fontSize: 14,
                    color: '#9a9a9a',
                    lineHeight: 20,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            data,
          },
        ],
      };
      //
      // 设置配置项并渲染图表
      chartInstance.setOption(option);

      // 组件卸载时清理图表实例
      return () => {
        chartInstance.dispose();
      };
    }

    return;
  }, [chartRef.current, data]);

  return <div ref={chartRef} style={{ width: 540, height: 200 }} />;
};

export default PieChart;
